<template>
  <div idm-ctrl="idm_module" :id="moduleObject.id" :idm-ctrl-id="moduleObject.id">
    <div class="reportletter-box">
      <div class="reportletter-wrap">
        <!-- 信件 -->
        <div class="letter" v-if="styleSelectType === '1'">
          <div v-html="handleText()"></div>
        </div>
        <!-- 报告 -->
        <div class="report" v-if="styleSelectType === '2'">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img class="swiper-bg" :src="propData.firstImg && IDM.url.getWebPath(propData.firstImg)" alt="">
                <!-- <img class="swiper-bg" src="../assets/slide/bg1.png" alt=""> -->
                <div class="logo"></div>
                <div class="swiper-time">{{ pageObj[propData.firstTimeField] }}</div>
                <div class="swiper-year"></div>
                <div class="swiper-report"></div>
                <div class="swiper-name">{{ pageObj[propData.firstNameField]  }}</div>
              </div>
              <div class="swiper-slide" v-for="(item, index) in contentAry" :key="index">
                <img class="swiper-bg" :src="propData.secondImg && IDM.url.getWebPath(propData.secondImg)" alt="">
                <!-- <img class="swiper-bg" src="../assets/slide/bg4.png" alt=""> -->
                <div class="swiper-font" v-html="item"></div>
              </div>
              <div class="swiper-slide">
                <img class="swiper-bg" :src="propData.lastImg && IDM.url.getWebPath(propData.lastImg)" alt="">
                <div class="swiper-logo"></div>
                <div class="swiper-p p1">往日已去</div>
                <div class="swiper-p p2">感谢您的付出</div>
                <div class="swiper-p p3">未来继续期待您的参与</div>
                <div class="swiper-bai swiper-p">
                  <span>我们</span>
                  <!-- <img class="swiper-wid" src="../assets/slide/2023.png" alt=""> -->
                  <img class="swiper-wid" :src="this.moduleObject && IDM.url.getModuleAssetsWebPath(require('../assets/slide/2023.png'), this.moduleObject)" alt="">
                  <span>再见!</span>
                </div>
                <div class="swiper-fot swiper-p">
                  <span>上海梦创双杨数据科技有限公司</span>
                  <div>2022年12月28日</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
export default {
  name: 'IReportIetter',
  data () {
    return {
      pageObj: {},
      moduleObject: {},
      styleSelectType: '',
      contentAry: [],
      propData: this.$root.propData.compositeAttr || {
        width: '375px',
        height: '667px',
        styleType: '2',
        boxShadow: '0px 0px 10px 0px #ccc'
      }
    }
  },
  mounted () {
    this.moduleObject = this.$root.moduleObject;
    this.init()
    this.myswiper()
  },
  methods: {
    propDataWatchHandle(propData) {
      this.propData = propData.compositeAttr || {};
      this.init();
    },
    handleText () {
      let content = this.pageObj[this.propData.contentField];
      if (!content) return this.propData.contentText;
      let result = content.replace(/{([^}]+)}+/g, (val) => {
        let name = val.substring(2, val.length - 2);
        return this.pageObj[name]
      })
      return result
    },
    handleStyle () {
      let styleObject = {},
        listObj = {},
        bodyStyleObj = {},
        styleChart = {};
      for (const key in this.propData) {
        if (this.propData.hasOwnProperty.call(this.propData, key)) {
          const element = this.propData[key];
          if (!element && element !== false && element != 0) {
            continue
          }
          switch (key) {
            case 'boxColor':
              bodyStyleObj['background-color'] = element && element.hex8;
              break
            case 'width':
              styleObject['width'] = element;
              break
            case 'height':
              styleObject['height'] = element;
              break
            case 'ulbox':
              IDM.style.setBoxStyle(styleObject, element);
              break
            case 'bgColor':
              styleObject['background-color'] = element && element.hex8;
              break
            case 'boxShadow':
              styleObject['box-shadow'] = element;
              break
            case 'boxBorder':
              IDM.style.setBorderStyle(styleObject, element);
              break
            case 'letterBackground':
              styleChart['background'] = `url(${IDM.url.getWebPath(element) }) no-repeat`;
              styleChart['background-size'] = '100% 100%';
              break
            case 'contentFont':
              IDM.style.setFontStyle(styleChart, element);
              IDM.style.setFontStyle(listObj, element);
              break
            case 'libox':
              IDM.style.setBoxStyle(styleChart, element);
              break
          }
        }
      }
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .reportletter-box", bodyStyleObj);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .reportletter-wrap", styleObject);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .letter", styleChart);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .swiper-slide", listObj);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .swiper-font", listObj);
      window.IDM.setStyleToPageHead(this.moduleObject.id + " .swiper-name", listObj);
    },
    // 过滤接口参数
    fileterParams() {
      let obj = {};
      if (this.propData.customFunc && this.propData.customFunc.length > 0) {
        let name = this.propData.customFunc[0].name
        obj = window[name] && window[name].call(this);
      }
      return obj
    },
    initData () {
      if (this.moduleObject.env == "production") {
        if (this.propData.dataSource) {
          const routerParams = this.fileterParams();
          IDM.datasource.request(this.propData.dataSource[0]?.id, {
            moduleObject: this.moduleObject,
            param: { ...routerParams }
          }, (data) => {
            if (data) {
              this.pageObj = data;
              this.styleSelectType = this.pageObj[this.propData.typeSelectField];
              if (this.styleSelectType === '2') { // 报告
                let content = this.pageObj[this.propData.contentField];
                let result = content.replace(/{([^}]+)}+/g, (val) => {
                  let name = val.substring(2, val.length - 2);
                  return this.pageObj[name]
                })
                let contentAry = result.split('=>');
                this.contentAry = contentAry;
              }
              this.$nextTick(() => {
                this.myswiper();
              })
            }
          })
        }
      } else {
        let str = '尊敬的用户您好！=>&nbsp;&nbsp;&nbsp;&nbsp;本月登录平台：2次，最早登陆时间为：5，最晚登出时间为：8。=><br>>';
        // let contentAry = content.split('=>');
        // this.contentAry = contentAry;
        this.contentAry = str.split("=>")
      }
    },
    myswiper () {
      new Swiper('.swiper-container', {
        direction: 'vertical',
      });
    },
    init() {
      this.styleSelectType = this.propData.styleType;
      console.log(this.propData, '数据源');
      this.handleStyle();
      this.initData();
      this.$nextTick(() => {
        this.myswiper();
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.reportletter-box{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  .letter, .report{
    width: 100%;
    height: 100%;
  }
  .swiper-container{
    width: 100%;
    height: 100%;
  }
  .swiper-slide{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    .swiper-bg{
      width: 100%;
      height: 100%;
    }
    .swiper-font{
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 20px;
    }
    .logo{
      position: absolute;
      left: 20px;
      top: 16px;
      width: 100px;
      height: 33px;
      background: url('../assets/slide/logo.png') no-repeat;
      background-size: 100% 100%;
    }
    .swiper-time{
      position: absolute;
      top: 22px;
      left: 128px;
      color: #00DAF5;
      font-size: 14px;
    }
    .swiper-year{
      width: 195px;
      height: 63px;
      position: absolute;
      top: 22%;
      background: url('../assets/slide/bg3.png') no-repeat;
      background-size: 100% 100%;
    }
    .swiper-report{
      width: 232px;
      height: 30px;
      position: absolute;
      top: 35%;
      background: url('../assets/slide/bg2.png') no-repeat;
      background-size: 100% 100%;
    }
    .swiper-name{
      position: absolute;
      top: 50%;
    }
    .swiper-logo{
      position: absolute;
      top: 20%;
      width: 100px;
      height: 33px;
      background: url('../assets/slide/logo.png') no-repeat;
      background-size: 100% 100%;
    }
    .swiper-p{
      position: absolute;
      color: #fff;
    }
    .swiper-wid{
      width: 195px;
      height: 157px;
    }
    .swiper-bai{
      position: absolute;
      top: 43%;
      display: flex;
      align-items: flex-end;
    }
    .swiper-fot{
      position: absolute;
      top: 70%;
      text-align: center;
    }
    .p1{
      top: 28%;
    }
    .p2{
      top: 33%;
    }
    .p3{
      top: 38%;
    }
  }
}
</style>
